<template>
  <div class="pc-select-box" :class="{'medium-size':size==='medium','small-size':size==='small'}">
    <div class="container">
      <div
        class="pc-fake-select flex-right"
        :class="{'medium-size':size==='medium','small-size':size==='small'}"
        @click.stop="showList"
      >
        <p
          class="value-txt"
          :class="{'medium-size':size==='medium','small-size':size==='small'}"
        >{{$t('address.about')}} ￥{{Number(value).toFixed(2)}}</p>
        <img src="../../../assets/img/computer/array.png" :class="{'translate':showOptions}" />
        <div class="total-icon" v-if="accToken.length>0">{{accValue.length}}</div>
      </div>
      <transition name="slide">
        <div class="pc-fake-option" v-if="showOptions" @click.stop>
          <i class="iconfont iconsousuo"></i>
          <input type="text" :placeholder="$t('address.tokenPlaceholder')" v-model="search" />
          <ul v-if="accToken.length>0">
            <li v-for="(item,index) in accToken" :key="index" @click="searchToken(item)">
              <div class="token flex-between">
                <div class="flex-left">
                  <img :src="item.icon" alt />
                  <span>
                    {{item.symbol}}
                    <span
                      v-if="item.nickname&&JSON.parse(item.nickname)[lang]"
                    >({{JSON.parse(item.nickname)[lang]}})</span>
                  </span>
                </div>
                <span>￥{{Number(item.rmb).toFixed(2)}}</span>
              </div>
              <div class="flex-between">
                <span class="token-total">{{item.balance}} {{item.symbol}}</span>
                <span>￥{{Number(item.rmb*item.balance).toFixed(2)}}</span>
              </div>
            </li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    size: {
      type: String,
      default: "medium"
    },
    value: {},
    accValue: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      search: "",
      showOptions: false
    };
  },
  computed: {
    accToken() {
      return this.accValue.filter(
        data =>
          !this.search ||
          data.nickname.toLowerCase().includes(this.search.toLowerCase()) ||
          data.symbol.toLowerCase().includes(this.search.toLowerCase())
      );
    },
    address() {
      return this.$route.query.address;
    },
    lang() {
      let language = "";
      switch (this.$store.state.initLang) {
        case "zh":
          language = "zh-CN";
          break;
        case "en":
          language = "en-US";
          break;
        case "ja":
          language = "ja";
          break;
        default:
          break;
      }
      return language;
    }
  },
  mounted() {
    this.globalClick(this.close);
  },
  methods: {
    searchToken(token) {
      let that = this;
      this.$router.push({
        path: "/tokenDetail",
        query: { TokenName: token.symbol, adr: that.address }
      });
    },
    showList() {
      if (this.showOptions) {
        this.showOptions = false;
        return;
      }
      this.showOptions = true;
    },
    close() {
      this.search = "";
      this.showOptions = false;
    }
  }
};
</script> 

<style lang="scss" scoped>
.pc-select-box {
  width: 100%;
  position: relative;
  .container {
    width: 100%;
    background: $white;
    position: absolute;
    box-shadow: 0px 2px 4px 0px rgba(203, 203, 203, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(235, 239, 241, 1);
    .pc-fake-option {
      .iconsousuo {
        position: absolute;
        left: 15px;
      }
      input {
        width: 100%;
        height: 40px;
        padding: 0 40px;
        border: none;
        border-bottom: 1px solid #ebeff1;
        color: $black;
      }
      input::-webkit-input-placeholder {
        color: $grey_deep;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: $grey_deep;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: $grey_deep;
      }
      ul {
        margin-top: 5px;
        max-height: 180px;
        overflow-y: scroll;
        li {
          padding: 0 15px;
          cursor: pointer;
          transition: 0.3s;
          span {
            height: 30px;
            line-height: 30px;
          }
          .token {
            img {
              height: 24px;
              margin-right: 10px;
            }
          }
          .token-total {
            margin-left: 36px;
          }
        }
        li:hover {
          background: #f7fafd;
          color: #dd9e2d;
        }
      }
      ul::-webkit-scrollbar {
        width: 5px;
        height: 5px;
      }
      ul::-webkit-scrollbar-thumb {
        border-radius: 50px;
        background: #ccc;
      }
    }
  }
  .pc-fake-select {
    position: relative;
    background: rgba(247, 250, 253, 1);
    border-radius: 10px;
    // border: 1px solid rgba(235, 239, 241, 1);
    cursor: pointer;
    .value-txt {
      width: 100%;
      padding: 0 15px;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
    }
    .value-txt::-webkit-scrollbar {
      display: none;
    }
    img {
      margin-right: 22px;
      width: 8px;
      transition: 0.5s;
    }
    .translate {
      transform: rotate(180deg);
    }
    .total-icon {
      top: -15px;
      right: -15px;
      position: absolute;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: $orange_deep;
      color: $white;
      border-radius: 50%;
    }
  }
}
.medium-size {
  height: 40px;
  line-height: 40px;
}
.small-size {
  height: 30px;
  line-height: 30px;
}
.slide-enter-active {
  transition: all 0.3s ease-in-out;
}
.slide-enter {
  opacity: 0;
}
</style>

